<template>
  <div class="cTable">
    <div class="container">
      <div class="header">
        <div v-if="title" class="title"><span>| </span>{{ props.title }}</div>
        <div class="content"><slot name="header"></slot></div>
      </div>
      <div><slot name="button"></slot></div>
    </div>
    <el-table :data="pageData" style="width: 100%" v-bind="$attrs">
      <template v-for="(column, index) in columns" :key="index">
        <el-table-column v-if="!column.myType" v-bind="column"></el-table-column>
        <el-table-column v-else v-bind="column">
          <template #default="scope">
            <div v-if="column.myType == 'slot'" class="opt">
              <slot :name="column.slotName" :row="scope.row"></slot>
            </div>
            <div v-else-if="edit">
              <component :is="column.myType" v-model="scope.row[column.prop]" />
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination v-if="pagination" v-model:current-page="currentPage" :page-size="pageSize" :total="total" />
  </div>
</template>
<script setup lang="ts">
/**
 * table 二次封装，添加了title、button、pagination 三部分功能
 * pagination 控制是否开启前端分页功能
 * 三个插槽 button 、 header（title的追加部分）、otp(操作列插槽)
 */
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  data: {
    type: Array<any>,
    default: []
  },
  pageSize: {
    type: Number,
    default: 10
  },
  pagination: {
    type: Boolean,
    default: false
  },
  columns: {
    type: Array<any>,
    default: []
  },
  edit:{
    type:Boolean,
    default:false
  }
})
const currentPage = ref(1)

const total = computed(() => {
  return props.data.length
})

const pageData = computed(() => {
  const start = (currentPage.value - 1) * props.pageSize
  const end = currentPage.value * props.pageSize
  return props.pagination ? props.data.slice(start, end) : props.data
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.content {
  padding-left: 10px;
}
.title {
  span {
    font-weight: bold;
    color: blue;
  }
}

.cTable .opt {
  display: flex;
  justify-content: space-between;
}
</style>
